<template>
  <el-dialog :model-value="visible" title="邀请答主" width="480px" @close="$emit('close')" :close-on-click-modal="true">
    <div class="flex items-center justify-between mb-4">
      <el-input
        v-model="search"
        placeholder="搜索你想邀请的人"
        size="small"
        class="w-64 invite-search-input"
        clearable
        prefix-icon="el-icon-search"
      />
    </div>
    <div class="flex flex-col gap-0 max-h-[400px] overflow-y-auto">
      <div v-for="user in filteredUsers" :key="user.id" class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-blue-50 transition invite-user-row">
        <el-avatar :size="40" :src="user.avatar" />
        <div class="flex-1 min-w-0">
          <div class="font-medium text-slate-800">{{ user.name }}</div>
          <div class="text-xs text-slate-400 truncate">{{ user.desc }}</div>
        </div>
        <el-button size="small" type="primary" round @click="inviteUser(user)">{{ user.invited ? '已邀请' : '邀请回答' }}</el-button>
      </div>
      <div v-if="filteredUsers.length === 0" class="text-center text-slate-400 py-8">暂无匹配用户</div>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
const props = defineProps({
  visible: Boolean,
  users: Array
})
const emit = defineEmits(['close'])
const search = ref('')
const filteredUsers = computed(() => {
  if (!search.value.trim()) return props.users
  const kw = search.value.trim().toLowerCase()
  return props.users.filter(u => u.name.toLowerCase().includes(kw) || (u.desc && u.desc.toLowerCase().includes(kw)))
})
function inviteUser(user) {
  user.invited = true
}
watch(() => props.visible, v => { if (!v) search.value = '' })
</script>
<style scoped>
.invite-search-input {
  background: #f6f8fa;
  border-radius: 8px;
  border: 1px solid #e5eaf3;
  font-size: 14px;
  height: 32px;
}
.invite-user-row {
  border-bottom: 1px solid #f0f1f3;
  min-height: 56px;
  transition: background 0.18s;
}
.invite-user-row:last-child {
  border-bottom: none;
}
</style> 